<<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from "axios"
import AdminLayout from "@/views/AdminLayout.vue";
import request from "@/utils/request";
const http = axios.create({
  // baseURL:"http://127.0.0.1:8080",
  timeout:5000
});
const currentPage = ref(1)
const pageSize = ref(10)

const total = ref(0)

const dialogVisible = ref(false)

const dialogVisible1 = ref(false)

const addDialogVisible = ref(false)
const hotelName = ref('')
const tableData = ref([])
const tableData1 = ref([])
const centerDialogVisible = ref(false)

const form = ref({
  hotelName:'',
  address:'',
  star:'',
  openingYear:'',
})

const keyword = ref("")

const addForm =ref({
  hotelName:'',
  address:'',
  star:'',
  openingYear:'',
})

const addFormRef = ref("")

const rules = ref({
  hotelName: [
    { required: true, message: '请输入用酒店名', trigger: 'blur' },
    { min: 5, max: 14, message: 'Length should be 5 to 14', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/  //正则表达式 只能输入英文、汉字与数字
        if (!reg.test(value)) {
          callback(new Error('请勿输入特殊字符'))
        } else {
          callback()
        }
      }
    }
  ],
})

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  getPage()
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  getPage()
}
import {pageHotel, pageRoom} from "@/api/hotel";


const getPage = () => {
  const query = {
    hotelName: keyword.value,
  }
  pageHotel(query).then(res => {
    //
        // 添加搜索关键词参数
        total.value = res.data.total
    tableData.value = res.data.records
  })
}
  // const { data: res } = await http.get("/api/user/page")

// const disabledById = async (row) => {
//   const { data: res } = await http.post("/api/user/disabled", {
//         id: row.id,
//         disabled: 1
//       }
//   );
//   if (res.code === 200) {
//     ElMessage.success("禁用成功");
//     getPage()
//   } else {
//     ElMessage.error("禁用失败");
//   }
// }
//
// const enableById = async (row) => {
//   const { data: res } = await http.post("/api/user/enable", {
//         id: row.id,
//         disabled: 0
//       }
//   );
//   if (res.code === 200) {
//     ElMessage.success("启用成功");
//     getPage()
//   } else {
//     ElMessage.error("启用失败");
//   }
// }

const openDialogVisible = (row) => {
  dialogVisible.value = true
  form.value = row
}

const edit = async () => {
  const { data: res } = await http.post("/api/hotel/edit",
      form.value
  )
  if (res.code !== 200) {
    dialogVisible.value = false
    return ElMessage.error("编辑失败")
  }
  ElMessage.success("编辑成功");
  dialogVisible.value = false
  getPage()
}

const chatRoomType = (row) => {
  dialogVisible1.value = true
  console.log(row)
  pageRoom(row.id).then(res => {
    tableData1.value = res.data.roomList
  })
}

  const deleteById = (row) => {
    ElMessageBox.confirm(
        '此操作将永久删除该项,是否继续?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          const {data: res} = await http.delete(`/api/hotel/delete/${row.id}`)
          if (res.code !== 200) {
            return ElMessage.error("删除失败");
          }
          ElMessage({
            type: 'success',
            message: '删除成功!',
          })
          getPage()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消删除!',
          })
        })
  }

  const openAddDialogVisible = () => {
    addDialogVisible.value = true
  }

  const

      addUser = async () => {
        const {data: res} = await http.post("/api/hotel/add", addForm.value)
        if (res.code !== 200) {
          addDialogVisible.value = false
          return ElMessage.error("添加酒店失败");
        }
        ElMessage.success("添加酒店成功");
        addDialogVisible.value = false
        getPage()
      }

  const findUser = () => {
    getPage()
  }

  const handleClose = () => {
    addFormRef.value.resetFields()
  }

const handleClose1 = () =>{
  dialogVisible.value = false
}
const handleClose2 = () =>{
  dialogVisible1.value = false
}

  onMounted(() => {
    getPage()
  })
</script>

<template>
  < <div class="index">
  <el-row :gutter="20">
    <el-col :span="4">
      <el-button type="primary" @click="openAddDialogVisible">添加酒店</el-button>
    </el-col>
    <el-col :span="6">
      <el-input v-model="keyword" class="w-50 m-2" placeholder="请输入酒店名或id" >
        <template #append>
          <el-button @click="findUser">查找酒店</el-button>
        </template>
      </el-input>
    </el-col>
  </el-row>
  <el-table :data="tableData" border style="width: 100%" stripe>
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="hotelName" label="酒店名" />
    <el-table-column prop="address" label="地址" />
    <el-table-column prop="star" label="星级" />
    <el-table-column prop="openingYear" label="开业时间" />
<!--    <el-table-column label="状态">-->
<!--      <template v-slot="scoped">-->
<!--        <el-tag v-if="scoped.row.disabled == 1" type="danger">禁用</el-tag>-->
<!--        <el-tag v-else type="success">启用</el-tag>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column label="操作">
      <template v-slot="scoped">
<!--        <el-button size="small" type="info" @click="disabledById(scoped.row)">禁用</el-button>-->
<!--        <el-button size="small" type="success" @click="enableById(scoped.row)">启用</el-button>-->
        <el-button size="small" type="success" @click="chatRoomType(scoped.row)">查看</el-button>
        <el-button size="small" type="warning" @click="openDialogVisible(scoped.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteById(scoped.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[1, 2, 3, 4]"
                  layout="total, sizes, prev, pager, next, jumper"
                 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <el-dialog v-model="dialogVisible" title="编辑" width="30%" :before-close="handleClose1">
    <el-form :model="form" label-width="120px">
      <el-form-item label="酒店名">
        <el-input v-model="form.hotelName" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="星级">
        <el-input v-model="form.star" />
      </el-form-item>
      <el-form-item label="开业年份">
        <el-input v-model="form.openingYear" />
      </el-form-item>
    </el-form>
    <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="edit">
                        确定
                    </el-button>
                </span>
    </template>
  </el-dialog>
  <el-dialog v-model="addDialogVisible" title="添加酒店" width="30%" @close="handleClose" >
    <el-form :model="addForm" label-width="120px" :rules="rules" ref="addFormRef">
      <el-form-item label="酒店名" prop="u=hotelName">
        <el-input v-model="addForm.hotelName" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="addForm.address" />
      </el-form-item>
      <el-form-item label="星级" prop="star">
        <el-input v-model="addForm.star" />
      </el-form-item>
      <el-form-item label="开业年份" prop="openingYear">
        <el-input v-model="addForm.openingYear" />
      </el-form-item>
    </el-form>
    <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addUser">
                        添加
                    </el-button>
                </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible1" title="查看" width="30%" :before-close="handleClose2">
    <el-table :data="tableData1" border style="width: 100%" stripe>
      <el-table-column prop="roomType" label="房间类型" />
      <el-table-column prop="price" label="价格" />
    </el-table>
    <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                </span>
    </template>
  </el-dialog>

</div>
</template>

<style scoped lang="scss">
.index {
  width: auto;
  height: auto;
  padding: 30px;
  background-image: url('src/assets/login3.jpg');
  background-size: cover;
  background-position: center;

  .el-pagination {
    margin-top: 25px;

  }

  .el-row {
    margin-bottom: 25px;

  }
}
</style>